ESM 原生加载原理

Vite 核心优势来自浏览器原生 ESM 支持，开发环境无需打包。

ESM 加载流程

浏览器请求 index.html
  → 解析 script type="module"
  → 发起 import 请求
  → Vite 服务器编译模块
  → 返回编译后代码
  → 浏览器执行模块

传统打包对比

模块请求处理

// 浏览器发起请求
import App from './App.vue'

// Vite 服务器拦截处理
// 1. 识别 ./App.vue 请求
// 2. 编译 Vue 文件为 JS
// 3. 返回编译结果

注意：每个 import 都是一个 HTTP 请求，Vite 即时编译返回。

模块编译过程

请求 /src/App.vue
  → Vite 检查文件类型
  → Vue 插件处理
  → 返回编译后 JS 模块

响应示例：
export default {
  template: "...",
  setup() { ... }
}

依赖预构建

// 原始导入
import Vue from 'vue'

// 预构建后
import Vue from '/node_modules/.vite/deps/vue.js'

预构建目的：

• CJS/UMD 转为 ESM 格式
• 合并小依赖减少请求
• 缓存编译结果加速启动

模块缓存机制

node_modules/.vite/deps/
├── vue.js        # 预构建依赖
├── axios.js      # 预构建依赖
└── _metadata.json  # 元数据

热更新边界

// 修改 App.vue
// HMR 计算边界：
// App.vue → 依赖它的组件 → ... → 最顶层边界
// 只更新边界内模块，不刷新页面

要点总结

• Vite 利用浏览器原生 ESM 加载
• 每个 import 是独立 HTTP 请求
• 按需编译，启动无需打包
• 预构建处理非 ESM 依赖